Styling App Router
具体
CSS Modules
手堅い
Design System デザインシステムの実装は人力
Styling: CSS Modules | Next.js
CSS in JS (zero runtime CSS in JS)
Client componentsは対応できるだろうが、React Server Components RSCの対応が気になる
By Next.js
Warning: CSS-in-JS libraries which require runtime JavaScript are not currently supported in Server Components. Using CSS-in-JS with newer React features like Server Components and Streaming requires library authors to support the latest version of React, including concurrent rendering.
We're working with the React team on upstream APIs to handle CSS and JavaScript assets with support for React Server Components and streaming architecture.
vanilla-extract
not UI Framework
Unable to render when using with NextJS v13 & React Server Components · Issue #929 · vanilla-extract-css/vanilla-extract
vanilla-extract側で、React Server Components RSCでエラー出るIssueはあった。(今close)
Next.js側の対応待ちになっているっぽい。
Plugin support for Vanilla Extract · vercel/next.js · Discussion #49892
Panda CSS
Utility First
どうなんだろう？
観点
CSS in JS
UI Framework
Utility First
Design Tokensなど管理しやすいか？
汎用的UI
hr.icon
意見
Design System デザインシステム準拠にして、実装、デザインに縛り入れたい。
デザイン側がデザインシステムのデザイントークンと違う場合があっても、気づかない
実装側も調整だるいので、従って実装しちゃう
特にnot FEだとより言いにくい
hr.icon
ブログサイトを Next.js App Router に移行したので学びを書く | stin's blog
個人ブログサイトで、vanilla-extractを利用していたけど、App Routerを機に、CSS Modulesに移行した話
理由:
Next.js の最新ドキュメントで、Client components対応(→React Server Components RSC非対応?)と書かれていた
TODO: Reference
意外と、GitHub Copilotのお陰で書き換え楽らしい。
CSS Modules
ナレッジワーク